<template>
    <div class="slider" ref="slider">
        <div class="slider-group" ref="sliderGroup">
            <slot>

            </slot>
        </div>
        <div class="dots">
            <span :class="{active:currentPageIndex===index}"
                  class="dot"
                  v-for="(item,index) in dots"></span>
        </div>
    </div>
</template>

<script>
    import {addClass} from "../../common/js/dom";
    import BScroll from "better-scroll";

    export default {
        name: "slider",
        data() {
            return {
                dots: [],
                currentPageIndex: 0
            };
        },
        props: {
            loop: {
                type: Boolean,
                default: true
            },
            autoPlay: {
                type: Boolean,
                default: true
            },
            interval: {
                type: Number,
                default: 1000
            }
        },
        mounted() {
            setTimeout(() => {
                this._setSliderWidth();
                this._initDots();
                this._inisSlider();
                if (this.autoPlay) {
                    this._play()
                }
            }, 20)
            window.addEventListener('resize', () => {
                if (!this.slider) {
                    return
                }
                this._setSliderWidth(true)
                this.slider.refresh()
            })
        },
        methods: {
            _setSliderWidth(isResize) {
                this.chilren = this.$refs.sliderGroup.children;
                console.log(this.chilren);
                let width = 0;
                let sliderWidth = this.$refs.slider.clientWidth;
                console.log(sliderWidth);
                for (let i = 0; i < this.chilren.length; i++) {
                    let child = this.chilren[i];
                    console.log(child);
                    // child.className = 'slider-item';
                    addClass(child, "slider-item");
                    child.style.width = sliderWidth + "px";
                    width += sliderWidth;
                }
                if (this.loop&&!isResize) {
                    width += 2 * sliderWidth;
                }
                this.$refs.sliderGroup.style.width = width + "px";
            },
            _inisSlider() {
                this.slider = new BScroll(this.$refs.slider, {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: {
                        loop: this.loop,
                        threshold: 0.3,
                        speed: 400
                    },
                    click: true
                });
                this.slider.on('scrollEnd', () => {
                    let pageIndex = this.slider.getCurrentPage().pageX
                    /*if(this.loop){
                        pageIndex-=1;
                    }*/
                    this.currentPageIndex = pageIndex;
                    if (this.autoPlay) {
                        clearTimeout(this.timer);
                        this._play()
                    }
                })
            },
            _initDots() {
                this.dots = new Array(this.chilren.length);
            },
            _play() {
                this.timer = setTimeout(() => {
                    this.slider.next(400);
                }, this.interval)
            }
        },
        deactivated() {
            console.log();
            clearTimeout(this.timer)
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"

    .slider
        min-height: 1px
        position: relative;
        .slider-group
            position: relative
            overflow: hidden
            white-space: nowrap
            .slider-item
                float: left
                box-sizing: border-box
                overflow: hidden
                text-align: center
                a
                    display: block
                    width: 100%
                    overflow: hidden
                    text-decoration: none
                img
                    display: block
                    width: 100%
        .dots
            position: absolute
            right: 0
            left: 0
            bottom: 12px
            text-align: center
            font-size: 0
            .dot
                display: inline-block
                margin: 0 4px
                width: 8px
                height: 8px
                border-radius: 50%
                background: $color-text-l
                &.active
                    width: 20px
                    border-radius: 5px
                    background: $color-text-ll
</style>
